<template>
  <shop-car :list="list" @del="del" @add="add" @sub="sub"></shop-car>
</template>

<script>
import ShopCar from "./components/ShopCar.vue";
export default {
  components: { ShopCar },
  data() {
    return {
      list:JSON.parse(localStorage.getItem('list')) || []
        /* {
          name: "诸葛亮",
          price: 1000,
          num: 1,
          checked: false,
        },
        {
          name: "蔡文姬",
          price: 1500,
          num: 1,
          checked: false,
        },
        {
          name: "妲己",
          price: 2000,
          num: 1,
          checked: false,
        },
        {
          name: "鲁班",
          price: 2200,
          num: 1,
          checked: false,
        }, */
    };
  },
  methods: {
    del(name) {
      this.list = this.list.filter((item) => item.name !== name);
    },
    add(name) {
      const sum = this.list.find((item) => item.name == name);
      sum.num++;
    },
    sub(name) {
      const sum = this.list.find((item) => item.name == name);
      sum.num--;
    },
  },
  watch: {
    list: {
      deep: true,
      handler(newValue) {
        // 需要将变化后的 newValue 存入本地 （转JSON）
        localStorage.setItem("list", JSON.stringify(newValue));
      },
    },
  },
};
</script>

<style>
</style>